<template>
  <div class="recharge-page">
    <!-- Balance Section -->
    <div class="recharge-head">
      <div class="title">充值消费</div>
      <div class="text">充值消费</div>
    </div>
    <div class="balance-section">
      <div class="balance-item">
        <div class="label">账户余额</div>
        <div class="value">
          <div class="amount">
            {{ userInfo.balance }} <span class="unit">元</span>
          </div>
          <div class="recharge-btn" @click="isShow = true">
            <img src="@/assets/images/money.svg" alt="" />
            充值
          </div>
        </div>
      </div>
      <div class="balance-item">
        <div class="label">剩余字数</div>
        <div class="value">
          <div class="amount">
            {{ userInfo.grants }} <span class="unit">字</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Transaction Records -->
    <div class="transaction-records">
      <div class="header">消费记录</div>
      <div class="tabs">
        <div
          class="li"
          v-for="(item, index) in tabs"
          :key="index"
          @click="handleChange(index)"
          :class="{ active: index == active }"
        >
          {{ item }}
        </div>
      </div>
      <template v-if="transactions.length">
        <div class="table">
          <!--消费记录-->
          <el-table
            :data="transactions"
            v-loading="loading"
            v-show="active == 0"
          >
            <el-table-column
              prop="id"
              label="序号"
              width="70"
            ></el-table-column>
            <el-table-column
              prop="consume_type"
              label="消费类型"
            ></el-table-column>
            <el-table-column prop="updated_at" label="消费时间">
              <template slot-scope="{ row }">
                {{ new Date(row.updated_at).toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column prop="words" label="字数"></el-table-column>
            <el-table-column
              prop="amount"
              label="消费金额"
              align="right"
              width="80"
            >
              <template slot-scope="{ row }"> -{{ row.amount }} 元 </template>
            </el-table-column>
          </el-table>
          <!--充值记录-->
          <el-table
            :data="transactions"
            v-loading="loading"
            v-show="active == 1"
          >
            <el-table-column
              prop="id"
              label="序号"
              width="70"
            ></el-table-column>
            <el-table-column
              prop="recharge_type"
              label="充值渠道"
            ></el-table-column>
            <el-table-column prop="updated_at" label="充值时间">
              <template slot-scope="{ row }">
                {{ new Date(row.updated_at).toLocaleString() }}
              </template>
            </el-table-column>
            <el-table-column
              prop="amount"
              label="充值金额"
              align="right"
              width="150"
            >
              <template slot-scope="{ row }">
                +{{ row.amount ? `${row.amount}元` : `${row.words}字` }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page.sync="pages.page"
            :page-size.sync="pages.limit"
            @current-change="handlePageChange"
          >
          </el-pagination>
        </div>
      </template>
      <div v-else class="noDate">
        <img src="@/assets/images/zzzw.png" alt="" />
        没有消费/充值记录
      </div>
    </div>

    <rechargeDialog
      :visible.sync="isShow"
      @close="isShow = false"
      @pay="handleOpenPay"
    ></rechargeDialog>
    <payDialog :visible.sync="isPay" :amount="payInfo.amount"></payDialog>
  </div>
</template>

<script>
import { getRechargeList, getConsumeList } from "@/api/recharge";
import rechargeDialog from "./components/rechargeDialog";
import payDialog from "./components/payDialog.vue";
import { mapGetters } from "vuex";
export default {
  name: "RechargePage",
  components: {
    payDialog,
    rechargeDialog,
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      loading: false,
      payInfo: {
        amount: 0,
        method: "wechat",
      },
      isPay: false,
      isShow: false,
      pages: {
        page: 1,
        limit: 10,
      },
      total: 0,
      tabs: ["消费记录", "充值记录"],
      active: 0,
      currentPage: 1,
      transactions: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleOpenPay(method, amount) {
      this.payInfo.amount = amount;
      this.payInfo.method = method;
      this.isPay = true;
    },
    //切换tab
    handleChange(index) {
      this.active = index;
      this.pages = {
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    async getList() {
      this.loading = true;
      let res = null;
      if (this.active == 0) {
        res = await getConsumeList(this.pages);
      } else {
        res = await getRechargeList(this.pages);
      }
      this.total = res.total;
      this.transactions = res.records || [];
      this.loading = false;
    },
    handlePageChange(page) {
      this.getList();
      // Handle page change logic here
    },
  },
};
</script>

<style lang="scss" scoped>
.recharge-page {
  padding: 24px;
  background: #fff;
  font-family: PingFang SC, PingFang SC;

  .noDate {
    text-align: center;
    padding: 180px 0;
    font-size: 14px;
    color: rgba(0, 1, 27, 0.3);

    img {
      width: 140px;
      display: block;
      margin: 0 auto;
    }
  }

  .recharge-head {
    margin-bottom: 32px;

    .title {
      font-weight: 500;
      font-size: 20px;
      color: #00011b;
      margin-bottom: 8px;
    }

    .text {
      font-weight: 400;
      font-size: 12px;
      color: rgba(0, 1, 27, 0.5);
    }
  }

  .balance-section {
    display: flex;
    margin-bottom: 24px;

    .balance-item {
      flex: 1;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 4px 4px 4px 4px;

      .label {
        font-size: 14px;
        color: #666;
        height: 54px;
        padding: 16px 24px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      }

      .value {
        padding: 32px 16px;
        display: flex;
        align-items: flex-end;
      }

      .amount {
        font-weight: 600;
        font-size: 40px;
        color: #00011b;
      }

      .unit {
        font-weight: 500;
        font-size: 16px;
        color: #00011b;
      }

      .recharge-btn {
        margin-left: 48px;
        width: 90px;
        height: 38px;
        background: #165deb;
        border-radius: 6px 6px 6px 6px;
        box-sizing: border-box;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        img {
          margin-right: 4px;
          width: 22px;
          height: 22px;
        }
      }
    }

    .balance-item + .balance-item {
      margin-left: 24px;
    }
  }

  .transaction-records {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px 4px 4px 4px;

    .header {
      padding: 16px 24px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      font-weight: 400;
      font-size: 16px;
      color: #00011b;
    }

    .tabs {
      padding: 16px 24px;
      display: flex;

      .li {
        width: 88px;
        height: 30px;
        background: #edf0f7;
        border-radius: 26px 26px 26px 26px;
        line-height: 30px;
        text-align: center;
        font-weight: 400;
        font-size: 13px;
        color: rgba(0, 1, 27, 0.5);
        cursor: pointer;
      }

      .li + .li {
        margin-left: 16px;
      }

      .li.active {
        color: #ffffff;
        background: #165deb;
      }
    }

    .table {
      padding: 0 24px;

      ::v-deep .el-table {
        th {
          background: transparent;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 1, 27, 0.5);
        }

        .el-table__body-wrapper {
          font-weight: 500;
          font-size: 14px;
          color: #00011b;
          line-height: 16px;
        }
      }
    }

    .pagination {
      padding: 24px 0;
      text-align: right;
    }
  }
}

// Override Element UI styles
::v-deep .el-table {
  th {
    background-color: #f5f7fa;
    color: #606266;
  }
}
</style>
